<template>
	<view class="car-container">
		<!-- 搜索栏 -->
		<view class="search-container">
			<view class="search-box">
				<input 
					class="search-input" 
					v-model="searchKeyword" 
					placeholder="搜索车牌号或驾驶员"
					@input="onSearchInput"
				/>
				<text class="search-icon">🔍</text>
			</view>
		</view>
		
		<!-- 车辆列表 -->
		<scroll-view 
			class="list-container" 
			scroll-y="true"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view 
				v-for="(car, index) in filteredCarList" 
				:key="car.id" 
				class="car-item"
				:class="{ 'select-mode': selectMode }"
			>
				<!-- 车辆信息区域 -->
				<view class="car-info" @click="selectMode ? null : viewCarDetail(car)">
					<!-- 车牌号 -->
					<view class="license-plate">
						<text class="plate-text">{{ car.license_plate || car.licensePlate }}</text>
					</view>
					
					<!-- 驾驶员信息 -->
					<view class="driver-info">
						<view class="driver-item">
							<text class="driver-label">驾驶员：</text>
							<text class="driver-name">{{ car.driver_name || car.driverName }}</text>
						</view>
						<view class="driver-item">
							<text class="driver-label">手机号：</text>
							<text class="driver-phone">{{ car.driver_phone || car.driverPhone }}</text>
						</view>
					</view>
				</view>
				
				<!-- 选择模式下的操作按钮 -->
				<view v-if="selectMode" class="action-buttons">
					<button class="btn btn-select" @click="selectCar(car)">选择</button>
					<button class="btn btn-detail" @click="viewCarDetail(car)">详情</button>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-state">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 没有更多数据 -->
			<view v-if="noMore && carList.length > 0" class="no-more-state">
				<text class="no-more-text">没有更多数据了</text>
			</view>
			
			<!-- 空状态 -->
			<view v-if="filteredCarList.length === 0 && !loading" class="empty-state">
				<text class="empty-icon">🚗</text>
				<text class="empty-text">{{ searchKeyword ? '未找到相关车辆' : '暂无车辆数据' }}</text>
			</view>
		</scroll-view>
		
		<!-- 底部浮动新增按钮 -->
		<view class="floating-button" @click="addNewCar">
			<text class="add-icon">+</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '', // 搜索关键词
				selectMode: false, // 是否为选择模式
				carList: [], // 车辆列表
				loading: false, // 加载状态
				refreshing: false, // 下拉刷新状态
				noMore: false, // 是否没有更多数据
				pageNo: 1, // 当前页码
				pageSize: 10, // 每页数量
				total: 0 // 总数量
			}
		},
		
		onLoad(options) {
			// 检查是否为选择模式
			if (options.selectMode === 'true') {
				this.selectMode = true;
			}
		},
		onShow() {
			this.pageNo = 1
			this.carList = [];
			// 加载车辆列表
			this.getCarList();
		},
		computed: {
			// 过滤后的车辆列表
			filteredCarList() {
				if (!this.searchKeyword) {
					return this.carList;
				}
				
				const keyword = this.searchKeyword.toLowerCase();
				return this.carList.filter(car => {
					const licensePlate = (car.license_plate || car.licensePlate || '').toLowerCase();
					const driverName = (car.driver_name || car.driverName || '').toLowerCase();
					const driverPhone = (car.driver_phone || car.driverPhone || '');
					
					return licensePlate.includes(keyword) ||
						   driverName.includes(keyword) ||
						   driverPhone.includes(keyword);
				});
			}
		},
		
		methods: {
			// 获取车辆列表
			async getCarList(isRefresh = false) {
				if (this.loading) return;
				
				this.loading = true;
				
				try {
					const params = {
						pageNo: isRefresh ? 1 : this.pageNo,
						pageSize: 99999
					};
					
					const res = await this.$api.car.page(params);
					console.log('车辆列表:', res);
					
					if (res && res.list) {
						const { list, total, current, pageSize } = res;
						
						if (isRefresh) {
							this.carList = list || [];
							this.pageNo = 1;
						} else {
							this.carList = [...this.carList, ...(list || [])];
						}
						
						this.total = total || 0;
						this.pageNo = current || this.pageNo;
						this.pageSize = pageSize || this.pageSize;
						this.noMore = this.carList.length >= this.total;
					}
				} catch (error) {
					console.log('获取车辆列表失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
					this.refreshing = false;
				}
			},
			
			// 加载更多
			loadMore() {
				if (this.loading || this.noMore) return;
				this.pageNo++;
				this.getCarList();
			},
			
			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.noMore = false;
				this.getCarList(true);
			},
			
			// 搜索输入
			onSearchInput() {
				// 实时搜索，computed会自动更新
			},
			
			
			// 查看车辆详情
			viewCarDetail(car) {
				if (this.selectMode) {
					// 选择模式下，跳转到详情页面
					uni.navigateTo({
						url: `/pages/car/detail?id=${car.id}`
					});
				} else {
					// 普通模式下，显示详情弹窗
					const licensePlate = car.license_plate || car.licensePlate;
					const driverName = car.driver_name || car.driverName;
					const driverPhone = car.driver_phone || car.driverPhone;
					
					uni.showModal({
						title: '车辆详情',
						content: `车牌号：${licensePlate}\n驾驶员：${driverName}\n手机号：${driverPhone}`,
						showCancel: true,
						cancelText: '编辑',
						confirmText: '确定',
						success: (res) => {
							if (res.cancel) {
								// 点击编辑按钮，跳转到编辑页面
								uni.navigateTo({
									url: `/pages/car/detail?id=${car.id}`
								});
							}
						}
					});
				}
			},
			
			// 选择车辆
			selectCar(car) {
				// 通过事件总线返回选中的车辆信息
				uni.$emit('selectCar', car);
				uni.navigateBack();
			},
			
			// 新增车辆
			addNewCar() {
				uni.navigateTo({
					url: '/pages/car/detail'
				});
			}
		}
	}
</script>

<style scoped>
.car-container {
	height: 100vh;
	background-color: #F5F5F5;
	display: flex;
	flex-direction: column;
}

.page-header {
	background-color: #007AFF;
	padding: 30rpx;
	text-align: center;
}

.page-title {
	color: white;
	font-size: 36rpx;
	font-weight: bold;
}

.search-container {
	padding: 20rpx;
	background-color: white;
	border-bottom: 1rpx solid #E5E5E5;
}

.search-box {
	position: relative;
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	border-radius: 25rpx;
	padding: 0 30rpx;
	height: 70rpx;
}

.search-input {
	flex: 1;
	height: 100%;
	font-size: 28rpx;
	color: #333;
}

.search-icon {
	font-size: 28rpx;
	color: #999;
	margin-left: 20rpx;
}

.list-container {
	flex: 1;
	padding: 20rpx;
}

.car-item {
	background-color: white;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.car-item.select-mode {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.car-info {
	flex: 1;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
	margin-left: 20rpx;
}

.btn {
	height: 60rpx;
	padding: 0 24rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 100rpx;
}

.btn-select {
	background-color: #007AFF;
	color: white;
}

.btn-detail {
	background-color: #F5F5F5;
	color: #666;
}

.btn:active {
	opacity: 0.8;
}

.license-plate {
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.plate-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #007AFF;
}

.driver-info {
	margin-bottom: 20rpx;
}

.driver-item {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.driver-item:last-child {
	margin-bottom: 0;
}

.driver-label {
	font-size: 26rpx;
	color: #666;
	min-width: 120rpx;
}

.driver-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.driver-phone {
	font-size: 28rpx;
	color: #007AFF;
	font-weight: 500;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
}

.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
}

.loading-text {
	color: #007AFF;
	font-size: 28rpx;
}

.no-more-state {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0;
}

.no-more-text {
	color: #999;
	font-size: 24rpx;
}

.floating-button {
	position: fixed;
	right: 30rpx;
	bottom: 100rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #007AFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	z-index: 999;
}

.add-icon {
	color: white;
	font-size: 48rpx;
	font-weight: bold;
}

.floating-button:active {
	transform: scale(0.95);
}
</style>
